<template>
  <div>
    <el-table
      :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
      :key="itemkey"
      style="width: 100%"
      @row-click="rowClick"
    >
      <el-table-column label="班级名称" prop="name"></el-table-column>
      <el-table-column label="班级人数" width="180">
        <template slot-scope="scope">
          <el-tag size="medium">{{scope.row.studentNumber}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建日期" prop="createTime"></el-table-column>
      <el-table-column label="邀请码" prop="invitationCode"></el-table-column>
      <el-table-column align="right">
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template>
        <template slot-scope="scope">
          <div @click.stop="" v-if="userType == '2'">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-popconfirm
              confirm-button-text="是的"
              cancel-button-text="点错了"
              icon="el-icon-delete"
              confirm-button-type="danger"
              cancel-button-type="disabled"
              icon-color="red"
              title="您确定解散该班级吗？"
              @confirm="handleDelete(scope.$index, scope.row)"
            >
              <el-button style="margin-left:15px" size="mini" slot="reference" type="danger">解散</el-button>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-button
      v-if="this.$store.state.user.type == '2'"
      class="new-clazz"
      type="primary"
      icon="el-icon-plus"
      @click="openForm()"
      circle
    ></el-button>
    <CreateClazz :courseId="cno" :visible.sync="c_visible"></CreateClazz>
    <ModifiedClazz :clazzId.sync="currentClazzId" :visible.sync="m_visible"></ModifiedClazz>
  </div>
</template>

<script>
import CreateClazz from "./CreateClazz";
import ModifiedClazz from "./ModifiedClazz";
import { getClazzList, deleteClazz } from "../../../../api/clazz";

export default {
  mounted() {
    this.cno = this.$parent.cno;
    this.getList(this.cno);
  },
  data() {
    return {
      tableData: [],
      search: "",
      cno: "",
      currentClazzId: "",
      c_visible: false,
      m_visible: false,
      itemkey: "",
      userType: this.$store.state.user.type
    };
  },
  methods: {
    handleEdit(index, row) {
      this.currentClazzId = row.id;
      this.m_visible = true;
    },
    handleDelete(index, row) {
      this.deletePost(row.id);
    },
    rowClick(row, column, event) {
      this.$router.push({
        path: "clazz_student_list",
        query: {
          clazzId: row.id
        }
      });
    },
    async getList(cno) {
      const { data: res } = await getClazzList(cno);
      this.tableData = res.data.clazzList;
    },
    async deletePost(id) {
      const { data: res } = await deleteClazz(id);
      if (res.code == 20000) {
        await this.getList(this.cno);
        this.$notify.success({ title: res.message, message: "删除班级成功" });
      } else {
        this.$message.error(res.message);
      }
    },
    openForm() {
      this.c_visible = true;
    }
  },

  components: {
    CreateClazz,
    ModifiedClazz
  }
};
</script>
<style scoped>
.new-clazz {
  margin-top: 20px;
  margin-right: 15px;
  float: right;
  border-radius: 50%;
  font-size: 15px;
}
</style>